<template>
  <div id="app">
    <!-- 显示导航栏 -->
    <NavBar />
    <!-- <ThemeSwitcher /> -->
    <component :is="currentView" />
  </div>
</template>

<script>
import { defineComponent, computed, watch, onMounted } from "vue"; // 导入 computed 和 watch
import { useStore } from "vuex"; // 导入 useStore
import { useRouter } from "vue-router"; // 导入 useRouter
import DarkThemeSwitch from "./components/DarkThemeSwitch.vue"; // 根据你的项目结构调整路径
import NavBar from "./components/NavBar.vue"; // 引入 NavBar 组件
import "./assets/styles/dark-theme.css"; // 引入深色主题样式
import "./assets/styles/variables.module.scss";
import LoginView from "./views/LoginView.vue"; // 从views目录引入
import MainView from "./views/MainView.vue"; // 从views目录引入
import RegisterPage from "./views/RegisterPage.vue"; // 从views目录引入
import ResetPasswordPage from "./views/ResetPasswordPage.vue"; // 从views目录引入
// import ThemeSwitcher from './components/ThemeSwitcher.vue';
import { getAccessToken } from "@/modules/auth";
import { jwtDecode } from "jwt-decode";

export default defineComponent({
  name: "App",
  components: {
    DarkThemeSwitch,
    NavBar, // 注册 NavBar 组件
    // ThemeSwitcher,
    RegisterPage,
    ResetPasswordPage,
    LoginView,
    MainView,
  },
  setup() {
    const store = useStore(); // 获取 Vuex store 实例
    const router = useRouter(); // 获取路由实例
    // 计算属性，用于获取 isLoggedIn 状态
    const isLoggedIn = computed(() => store.state.users.isLoggedIn);
    const isRegistering = computed(() => store.state.users.isRegistering);
    const isForgotPassword = computed(() => store.state.users.isForgotPassword);
    // 如果需要在 isLoggedIn 变化时执行某些操作，可以使用 watch
    watch(isLoggedIn, (newVal) => {
      console.log("用户登录状态变化:", newVal);
      // 在这里可以执行其他操作，比如更新用户界面
    });

    // 使用 computed 属性来动态决定当前视图
    const currentView = computed(() => {
      if (isRegistering.value) {
        return "RegisterPage";
      }
      if (isForgotPassword.value) {
        return "ResetPasswordPage";
      }
      if (isLoggedIn.value === true) {
        return "MainView";
      } else {
        return "LoginView";
      }
    });
    onMounted(async () => {
      try {
        // 获取 token
        const token = await getAccessToken();
        if (token) {
          const decoded = jwtDecode(token);
          store.dispatch("users/login", {
            userData: {
              id: decoded.id,
              name: decoded.name,
              email: decoded.email,
              account: decoded.account,
              mode: decoded.mode,
            },
            token: token,
          });
          setTimeout(() => {
            router.push("/home"); // 登录成功后跳转到 Home 页面
          }, 100);
        } else {
          // token 为空，说明未登录
          store.dispatch("users/logout"); // 登出
          // store.dispatch("users/login", token); // 登录
        }
      } catch (error) {
        console.error(error);
      }
    });

    return {
      isLoggedIn,
      currentView,
    };
  },
});
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  // color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    // color: #2c3e50;

    &.router-link-exact-active {
      // color: #42b983;
    }
  }
}

.dark-theme-switch {
  position: absolute; /* 使按钮绝对定位 */
  top: 30px; /* 距离顶部的距离，根据需要调整 */
  right: 30px; /* 距离右侧的距离，根据需要调整 */
}
</style>
